<template>
    <!-- 班级管理页面 -->
    <div>
        <div style="margin-top: 20px;display: flex;margin-left: 75px;align-items: center;">
            <div>
                <span style="font-size: 25px;font-weight: 600;margin-top: 20px;margin-right: 20px;">班级管理</span>
            </div>
            <el-button class="icon-plus" @click="clickChange('addClass')">
                <i class="el-icon-circle-plus" style="margin-right: 10px;font-size: 20px;"></i><span>新增班级</span>
            </el-button>
            <addClass v-if="Visiable" ref="dialog" @closeDialog="handleClose"></addClass>
        </div>
        <div class="classmangement">
            <div style="display: flex;align-items: center;margin-left: 20px;">
                <p style="margin-right: 40px;">搜索</p>
                <el-input placeholder="请输入班级" v-model.trim="input" clearable style="width: 200px;"></el-input>
                <el-button style="background-color: rgb(23, 97, 253);color: white;" @click="searchClass">搜索</el-button>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;">
                <el-table :data="tableData.slice((currentpage - 1) * pageSizes, currentpage * pageSizes)" border
                    style="width:99%" :cell-style="rowStyle">
                    <el-table-column prop="classname" label="班级" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="classroom" label="教室" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="manger" label="项目经理" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="teacherman" label="班主任" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="job" label="就业" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="startime" label="开班时间" width="175" align="center">
                    </el-table-column>
                    <el-table-column prop="endtime" label="结课时间" width="175" align="center">
                    </el-table-column>
                    <el-table-column prop="score" label="班级平均分" width="126" align="center">
                    </el-table-column>
                    <el-table-column prop="done" label="操作" width="190" align="center">
                        <template slot-scope="scope">
                            <!-- 编辑弹窗 -->
                            <el-popover :disabled="teemp" placement="left-start" title="编辑班级" width="1000" trigger="click">
                                <el-form ref="form" :model="addClassData" label-width="80px">
                                    <div style="display: flex;">
                                        <el-form-item label="班级:" style="width: 300px;">
                                            <el-input v-model.trim="addClassData.classname" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                        <el-form-item label="教室:" style=" width: 300px;">
                                            <el-select v-model.trim="addClassData.classroom" placeholder="请选择教室">
                                                <el-option label="201" value="201"></el-option>
                                                <el-option label="202" value="202"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="display: flex;">
                                        <el-form-item label="项目经理:" style="width: 300px;">
                                            <el-input v-model.trim="addClassData.manger" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                        <el-form-item label="班主任:" style="width: 300px;">
                                            <el-input v-model.trim="addClassData.teacherman" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                        <el-form-item label="就业:" style="width: 300px;">
                                            <el-input v-model.trim="addClassData.job" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                    </div>
                                    <div>
                                        <span style="margin-left: 10px;">开班时间：</span><el-date-picker
                                            v-model.trim="addClassData.startime" label="" type="date" placeholder="选择日期"
                                            value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                        <span style="margin-left: 10px;">结班时间：</span><el-date-picker
                                            v-model.trim="addClassData.endtime" type="date" placeholder="选择日期"
                                            value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                    <div>
                                        <el-form-item label="班级备注:" width="100px" style="margin-top: 20px;width: 900px;">
                                            <el-input v-model.trim="addClassData.classnote" placeholder="请输入内容"
                                                clearable></el-input>
                                        </el-form-item>
                                    </div>
                                    <el-button type="primary" style="background-color: rgb(23, 97, 253);margin-left: 500px;"
                                        @click="editData(addClassData)">编辑</el-button>
                                </el-form>
                                <i @click="editClass(scope.row)" slot="reference" type="text" size="small"
                                    class="el-icon-edit" style="cursor: pointer; color: rgb(70, 184, 239);">
                                </i>
                            </el-popover>
                            <i type="text" size="small" slot="reference" class="el-icon-delete"
                                @click="deleteclass(scope.row)" style="margin-left: 30px;color: red;cursor: pointer;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination :page-sizes="[5, 8, 10]" :page-size="pageSizes" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length" :current-page="currentpage" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import addClass from '../components/class/addClass.vue';
export default {
    components: { addClass },
    data() {
        return {
            tableData: [{
                classname: '',//班级
                classroom: '',//教室
                manger: '',///项目经理
                teacherman: '',//班主任
                job: '',//就业
                startime: null,//开班时间
                endtime: null,//结班时间
                score: 65.8,//班级品均分
            }],
            input: '',
            Visiable: false,
            visiable: false,
            currentpage: 1,
            pageSizes: 5,
            arr: [],//用来接收tableDate的数据
            addClassData: {
                classname: '',// 班级
                classroom: '',//教室
                manger: '',///项目经理
                teacherman: '',//班主任
                job: '',//就业
                startime: '',//开班时间
                endtime: '',//结班时间
                classnote: ''//备注
            },
            eidtid: '',//用来接收编辑时的id传给后端
            teemp: false,//判断编辑弹窗是否显示
        }
    },
    methods: {
        clickChange(data) {
            this.Visiable = true;
            this.$nextTick(() => {
                this.$refs.dialog.init(data)
            })
        },
        handleSizeChange(val) {
            this.pageSizes = val;
            console.log('总页数' + val)
        },
        handleCurrentChange(val) {
            this.currentpage = val;
            console.log('当前第' + val + '页');
        },
        //编辑班级
        editClass(scope) {
            this.addClassData = scope;
            this.eidtid = scope.classid;
        },
        editData(addClassData) {
            this.$axios.put(`/classmon/editClass/${this.eidtid}`, this.addClassData,
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    this.teemp = false;
                    if (response.data.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '编辑失败'
                        })
                    }
                    this.$message({
                        type: 'success',
                        message: '编辑成功'
                    });
                    this.get();
                });
        },
        //搜索班级
        searchClass() {
            if (this.input == '') {
                return this.tableData = this.arr
            } else {
                const data = new URLSearchParams();
                data.append('classname', this.input);
                axios.post('/classmon/obscureclass', data).then((response) => {
                    this.tableData = response.data.data;
                })
            }
        },
        // 删除班级
        deleteclass(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let payload = {
                    id: id.classid,
                };
                axios.delete('/classmon/deleteclass', { params: payload }).then((response) => {
                    console.log(response);
                    if (response.data.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: '删除班级失败'
                        });
                    }
                    this.$message({
                        type: 'success',
                        message: '删除班级成功'
                    });
                    this.get();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取学生
        get() {
            axios.get('/classmon/getClass',
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
                    this.tableData = response.data.data;
                    this.arr = response.data.data;
                });
        },
        rowStyle() {
            return "text-align:center";
        },
        handleClose(data) {
            this.get();
        }
    },
    mounted() {
        this.get();
    },
}
</script>

<style lang="less" scoped>
.classmangement {
    width: 1300px;
    height: 650px;
    margin: auto;
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 30px rgba((0), 0, 0, 0.18);
}

.icon-plus {
    background-color: rgb(23, 97, 253);
    color: white;
}

.el-pagination {
    margin: 20px 0px;
}
</style>